<template>
  <!-- 添加回执 -->
  <view class="addRectific">
    <view class="content">
      <view class="content-item">
        <view class="deal-title">
          <text class="required">*</text>情况说明
        </view>
        <view class="thein-area">
          <u--textarea
            v-model="receiptDesc"
            placeholder="请简单描述清洗情况"
            count
            maxlength="50"
            placeholder-class="aaccd"
            height="135"
          ></u--textarea>
        </view>

        <view class="deal-title">
          <text class="required">*</text>
          图片说明
          <text>（上传1-4张图片）</text>
        </view>
        <view class="upload-view">
          <u-upload
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deletePic"
            name="file"
            :maxCount="4"
            :multiple="true"
            width="100"
            height="90"
          >
            <image
              :src="baseImgUrl + 'upload-icon.png'"
              style="width: 200rpx; height: 180rpx"
            ></image>
          </u-upload>
        </view>
      </view>
    </view>

    <view class="btns">
      <button
        class="reset-btn lt cancelBtn"
        type="primary"
        @click="resethandle"
      >
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        确认
      </button>
    </view>
  </view>
</template>

<script>
import { workOrderRecordReceipt } from "@/api/home.js";
import { Toast, navBack, uniTrim, emitTime } from "@/utils/util.js";

export default {
  name: "addRectific",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      options: {},
      receiptDesc: "",
      imageList: [],
      fileList: [],
    };
  },
  onLoad(options) {
    this.options = options;
  },
  methods: {
    afterRead(info) {
      let _this = this;
      for (let v of info.file) {
        uni.uploadFile({
          url: _this.baseURL + "/mini/sys/upload/upload_file",
          filePath: v.url,
          name: "file",
          header: {
            "content-type": "application/json", // 默认值
            "X-MINI-TOKEN": uni.getStorageSync("X-MINI-TOKEN"),
          },
          formData: {
            type: 7,
          },
          success(res) {
            let { fullPath, halfPath } = JSON.parse(res.data).result;
            _this.fileList.push({ url: fullPath });
            _this.imageList.push(halfPath);
          },
        });
      }
    },
    deletePic(e) {
      this.fileList.splice(e.index, 1);
      this.imageList.splice(e.index, 1);
    },
    resethandle() {
      uni.navigateBack();
    },
    submitHandle() {
      if (!this.receiptDesc || !uniTrim(this.receiptDesc)) {
        Toast("请填写情况说明");
        return;
      }

      if (!this.imageList.length) {
        Toast("至少上传1张图片");
        return;
      }

      let data = {
        id: this.options.id,
        receiptDesc: this.receiptDesc,
        receiptImageList: this.imageList,
      };
      workOrderRecordReceipt(data).then((res) => {
        if (res.code == 200) {
          Toast("回执成功");
          emitTime("rectification");
          navBack("back", 2);
          return;
        }

        Toast(res.message);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.addRectific {
  flex: 1;
  background-color: #f9f9f9;

  .content {
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    width: calc(100% - 35rpx);
    height: calc(100vh - 84px);
    overflow-y: auto;
    background: #fff;

    .content-item {
      padding: 25rpx;

      .deal-title {
        padding: 20rpx 0;
        color: #000000;
        font-size: 30rpx;
        font-weight: 500;

        text {
          color: #a1a1a1;
          font-size: 26rpx;
        }

        .required {
          display: inline-block;
          color: red;
          padding-right: 6rpx;
        }
      }

      .thein-area {
        font-size: 28rpx;
        .u-textarea--radius,
        .u-textarea__count {
          background: #f9f9f9 !important;
        }

        .u-textarea__field {
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
